<template>
    <div id="wrap"> 
        <div class="header">
            <div class="search-bar">
                <div class="top-search">
                    <div  >
                        <!-- <input name="city" value="101190400" type="hidden"> -->
                        <!-- <input name="source" value="10" type="hidden"> -->
                        <p class="ipt-wrap">
                            <a href="#" class="icon-home" @click="goIndex()">
                                <img src="https://static.zhipin.com/zhipin-geek/v179/h5/wap/images/icon-home.png">
                            </a>
                            <a class="city-text" @click="goCity()">{{$store.state.city}}</a>
                            <input type="search" :value="search" @change="getSearchchange"  ka="search-keyword" name="query" autocomplete="off" class="ipt-search" placeholder="搜索职位">
                            <button  class="btn btn-search" ka="search-btn" @click ="getSearch(search)">搜索</button>
                            <i class="icon-close" style="display: none;"></i>
                        </p>
                    </div>
                    <a href="/mpa/html/wapchat/list" ka="chat_message_click">
                        <div class="chat-wrap">
                            <div class="chat-icon">
                                <img class="chat-img" src="https://z.zhipin.com/H5/images/share/chat-active.png">
                            </div>
                            <span class="chat-text chat-text-active">消息</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getPositionList} from '../../../api/index'
import "../../../assets/style/reset.scss"
import {mapState} from 'vuex';
import { Search } from 'vant';
export default {
    data(){
        return{
            // search:'',
            searchData:'',
        }
    },
    methods:{
        goIndex(){
            this.$router.push("/")
        },
        goCity(){
            this.$router.push("/city")
        },
        getSearchchange(e){
            console.log(e.target.value)
            this.$store.commit('SET_SEARCHLIST',e.target.value);
        },
        getSearch(search){
            this.$store.state.positionlist;
            this.$store.commit('SET_SEARCHLIST',search);
            // this.$router.push("/position")
            console.log(search)
        }
    },
    created(){
    },
    computed:{
        ...mapState(['search'])
    }
}
</script>
<style lang="scss" scoped>

#wrap {
    position: relative;
    height:55px;
}
.header{
    width: 100%;
    background: #fff;
    position: relative;
    .search-bar{
        height: 55px;
        width: 100%;
    }
}
.top-search {
    float: initial;
    padding: 0;
    display: flex;
    align-items: flex-end;
    form {
        width: 100%;
    }
    .ipt-wrap {
        position: relative;
        padding: 0 60px 0 49px;
        padding-top: 13px;
    }
    .icon-home {
        display: block;
        position: absolute;
        left: 18px;
        top: 18px;
        img {
            width: 18px;
            height: 18px;
        }
    }
    a {
        text-decoration: none;
        color: #414a60;
    }
    .city-text {
        display: block;
        position: absolute;
        left: 62px;
        top: 20px;
        font-size: 12px;
        color: #333;
        border-right: solid 1px rgba(0,0,0,.05);
        width: 44px;
        height: 15px;
        line-height: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ipt-search {
        width: 100%;
        height: 29px;
        background-color: #f4f7f9;
        border: none;
        font-size: 14px;
        color: #8b96a6;
        line-height: 19px;
        padding: 5px 13px 5px 65px;
        border-radius: 15px;
        font-size: 13px;
        vertical-align: top;
    }
    .btn-search {
        color: #5dd5ca;
        background: 0 0;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 15px;
        line-height: 55px;
        height: 55px;
        display: block;
        width: 60px;
    }
    .chat-wrap {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: 15px;
    }
    .chat-icon {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .chat-img {
        width: 18px;
        height: 18px;
    }
    .chat-text-active {
        color: #5dd5ca;
    }
    .chat-text {
        margin-top: 2px;
        font-size: 10px;
        white-space: nowrap;
        line-height: 14px;
    }
}
</style>